<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <title>五下第8课《体验控制系统》恒温箱模拟</title>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-effect {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }
        
        .pulse-animation {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: .5;
            }
        }
        
        .bounce-in {
            animation: bounceIn 0.6s ease-out;
        }
        
        @keyframes bounceIn {
            0% {
                transform: scale(0.3);
                opacity: 0;
            }
            50% {
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>
</head>

<body class="gradient-bg min-h-screen flex items-center justify-center">
    <div class="absolute inset-0 bg-black opacity-10"></div>
    
    <!-- 游戏内容 -->
    <div id="gameContent" relative z-10>
        <div class="card-effect rounded-2xl p-8 shadow-2xl text-center w-full max-w-2xl mx-4">
            <!-- 游戏标题 -->
            <div class="mb-6">
                <h1 class="text-4xl font-bold text-gray-800 mb-2">🌡️ 恒温箱模拟</h1>
                <p class="text-gray-600">五下第8课《体验控制系统》</p>
            </div>
            
            <!-- 提示信息 -->
            <div class="bg-blue-50 border border-blue-200 text-blue-800 p-4 rounded-lg mb-6">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
                    </div>
                    <div class="text-left">
                        <p class="font-medium mb-1">操作说明：</p>
                        <ul class="list-disc list-inside space-y-1 text-sm">
                            <li>设置温度后，点击"启动"按钮，恒温箱将保持在该温度</li>
                            <li>打开风扇，可以使箱内温度每秒降低 0.1°C</li>
                            <li>打开加热器，可以使箱内温度每秒升高 0.1°C</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- 恒温箱模拟区域 -->
            <div class="bg-gray-100 rounded-xl p-6 mb-6 relative overflow-hidden" style="background-image: url('heng_wen/xiang.jpg'); background-size: cover; background-position: center; height: 450px;">
                <div class="absolute inset-0 bg-black bg-opacity-20"></div>
                
                <!-- 控制面板 -->
                <div class="relative z-10 bg-blue-600 bg-opacity-90 rounded-lg p-4 absolute" style="top: -20px; left: 10px; right: 10px;">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center -mt-2">
                            <span class="text-white font-medium mr-3">设置温度:</span>
                            <input type="number" id="temperature_set" value="24.0" min="0.0" max="35.0" step="0.1" class="w-24 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <span class="text-white ml-2">°C</span>
                        </div>
                        <button id="switch_btn" onclick="switchBox()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-500">
                            <i class="fas fa-power-off mr-2"></i>启动
                        </button>
                    </div>
                </div>
                
                <!-- 恒温箱内部 -->
                <div class="relative z-10 h-80">
                    <!-- 风扇 -->
                    <div class="absolute" style="top: 20px; left: 55%;">
                        <img id="fan" src="heng_wen/fan.png" width="120" height="120" class="transition-all duration-300">
                    </div>
                    
                    <!-- 加热器 -->
                    <div class="absolute" style="top: 120px; left: 30%; transform: translateX(-50%);">
                        <img id="heater" src="heng_wen/heater_off.png" width="150" height="150" class="transition-all duration-300">
                    </div>
                    
                    <!-- 温度显示 -->
                    <div class="bg-yellow-400 bg-opacity-90 border-2 border-yellow-500 rounded-lg px-4 py-2 shadow-lg absolute" style="top: 280px; left: 50%; transform: translateX(-50%);">
                        <div class="flex items-center">
                            <i class="fas fa-thermometer-half text-yellow-800 mr-2"></i>
                            <span class="font-medium text-yellow-900">实时温度:</span>
                            <span id="temperature_now" class="font-bold text-xl ml-2">22.3</span>
                            <span class="font-medium text-yellow-900 ml-1">°C</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 定义三个变量，一个表示程序是否正在运行，一个表示当前温度，一个表示加热器是否正在运行
        let isRunning = false;
        let temperatureNow = 22.3;
        let isHeaterRunning = false;
        // 添加一个变量来跟踪当前温度等于设置温度的时间
        let equalTemperatureTime = 0;
    
        // 定义一个函数，用于切换是否正在运行
        function switchBox(){
            // 切换 isRunning 的值
            isRunning = !isRunning;
            const switchBtn = document.getElementById("switch_btn");
            
            if(isRunning){
                // 如果正在运行，将按钮的文字改为 "停止"，颜色改为红色
                switchBtn.innerHTML = '<i class="fas fa-stop mr-2"></i>停止';
                switchBtn.className = "bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500";
            }else{
                // 如果没有运行，将按钮的文字改为 "启动"，颜色改为绿色，关闭加热器和风扇
                switchBtn.innerHTML = '<i class="fas fa-power-off mr-2"></i>启动';
                switchBtn.className = "bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-500";
                document.getElementById("heater").src="heng_wen/heater_off.png";
                document.getElementById("fan").src="heng_wen/fan.png";
            }
        }
    
        // 每隔 1 秒执行一次以下的函数
        setInterval(function(){
            // 如果没有运行，直接返回，不执行后面的代码
            if(!isRunning) return;
            
            // 获取设置的温度
            let temperatureSet = parseFloat(document.getElementById("temperature_set").value);
            if(temperatureNow > temperatureSet){
                // 如果当前温度大于设置的温度，将当前温度降低 0.1，关闭加热器，打开风扇
                temperatureNow -= 0.1;
                document.getElementById("fan").src="heng_wen/fan.gif";
                document.getElementById("heater").src="heng_wen/heater_off.png";
                isHeaterRunning = false;
                // 清零等于设置温度的时间
                equalTemperatureTime = 0;
            }else if(temperatureNow < temperatureSet){
                // 如果当前温度小于设置的温度，将当前温度增加 0.1，打开加热器，关闭风扇
                temperatureNow += 0.1;
                document.getElementById("fan").src="heng_wen/fan.png";
                document.getElementById("heater").src="heng_wen/heater_on.png";
                isHeaterRunning = true;
                // 清零等于设置温度的时间
                equalTemperatureTime = 0;
            }else{
                // 如果当前温度等于设置的温度，关闭加热器和风扇
                document.getElementById("fan").src="heng_wen/fan.png";
                document.getElementById("heater").src="heng_wen/heater_off.png";
                isHeaterRunning = false;
                // 增加等于设置温度的时间
                equalTemperatureTime += 1;
                // 如果等于设置温度的时间达到 5 秒，将当前温度降低 0.1
                if(equalTemperatureTime >= 5){
                    temperatureNow -= 0.1;
                    // 清零等于设置温度的时间
                    equalTemperatureTime = 0;
                }
            }

            // 更新显示的当前温度，保留一位小数
            document.getElementById("temperature_now").innerText = temperatureNow.toFixed(1);

        }, 1000);

        // 监听输入框的 input 事件
        document.getElementById("temperature_set").addEventListener("input", function() {
            let value = parseFloat(this.value);
            if (value < 0.0) {
                this.value = "0.0";
            } else if (value > 35.0) {
                this.value = "35.0";
            }
        });

    </script>

</body>
</html>